<template>
  <vxe-modal title="资源上传" v-model="showResourceUpload" width="430" height="400"
             :before-hide-method="beforeHideMethod">
    <template>
      <el-form :model="resourceUploadForm" size="small" label-width="80px">
        <el-form-item label="发布渠道">
          <el-radio-group v-model="resourceUploadForm.publishMode">
            <el-radio label="1">内部发布</el-radio>
            <el-radio label="2">外部链接</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="数据类型">
          <el-select v-model="resourceUploadForm.mapType" placeholder="请选择数据类型">
            <el-option v-for="item of dataType" :label="item['dictValue']" :value="item['dictKey']"></el-option>
            <el-option v-if="resourceUploadForm.publishMode==='2'" label="其他" value="0"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="其他类型" v-if="resourceUploadForm.mapType==='0'">
          <el-input v-model="resourceUploadForm.mapTypeElse" placeholder="其他数据类型"></el-input>
        </el-form-item>

        <el-form-item label="文件上传" v-if="resourceUploadForm.publishMode==='1'">
          <el-upload
              action="#"
              accept=".zip"
              :file-list="fileList"
              :on-change="handleChange"
              :auto-upload="false">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <div slot="tip" class="el-upload__tip">只能上传zip文件，且不超过150Mb</div>
          </el-upload>
        </el-form-item>

        <el-form-item label="服务名称" v-if="resourceUploadForm.publishMode==='2'">
          <el-input v-model="resourceUploadForm.serName"></el-input>
        </el-form-item>

        <el-form-item label="外部链接" v-if="resourceUploadForm.publishMode==='2'">
          <el-input v-model="resourceUploadForm.publishSite"></el-input>
        </el-form-item>

        <el-form-item>
          <el-row>
            <el-col :span="12" :offset="4">
              <el-button @click="beforeHideMethod">取消</el-button>
              <el-button type="primary" @click="save">提交</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>

      <black-mask :is-show.sync="showBlackMask">
        <template>
          <el-progress type="circle"
                       :percentage="uploadPrecent"
                       :stroke-width="10"
                       class="upload-el-progress"></el-progress>
          <p class="upload-text">文件上传中...</p>
        </template>
      </black-mask>
    </template>
  </vxe-modal>
</template>

<script>
/**
 * {资源文件上传}
 *
 * @author: 宋康
 * @date: 2023/2/8
 */
import {saveResourceItemMap} from '@/api/resources-center/service/index.js'

export default {
  name: "ResourceUpload",
  props: {
    isShow: {
      type: Boolean,
      required: true
    },
    serviceType: {
      type: Number,
      required: true
    },
    dataType: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      showBlackMask: false,
      uploadPrecent: 0,
      fileList: [],
      showResourceUpload: false,
      resourceUploadForm: {
        serName: '',
        publishMode: '1',
        publishSite: '',
        mapType: '',
        mapTypeElse: ''
      }
    }
  },
  methods: {
    beforeHideMethod() {
      this.$emit('update:isShow', false);
    },
    /**
     * {上传文件改变触发}
     *
     * @author: 宋康
     * @date: 2023/2/14
     */
    handleChange(file, fileList) {
      this.fileList = fileList.slice(-1);
    },
    /**
     * {资源上传}
     *
     * @author: 宋康
     * @date: 2023/2/8
     */
    save() {
      let formData = new FormData();
      formData.append('resourceId', this.$route.query.resourceId);
      formData.append('serName', this.resourceUploadForm.serName);
      formData.append('publishMode', this.resourceUploadForm.publishMode);
      formData.append('publishSite', this.resourceUploadForm.publishSite);
      formData.append('mapType', this.resourceUploadForm.mapType);
      formData.append('mapTypeElse', this.resourceUploadForm.mapTypeElse);
      if (this.fileList.length > 0) {
        const maxSize = 1024 * 1024 * 150;
        const file = this.fileList[0];
        if ('.zip' !== file.name.substr(file.name.length - 4)) {
          this.$message.error("上传文件类型错误");
          return;
        }
        if (file.size > maxSize) {
          this.$message.error("上传文件过大");
          return;
        }
        formData.append('file', file.raw);
      }
      this._debounce(() => {
        // 开启上传进度条
        this.showBlackMask = true;
        saveResourceItemMap(formData, (e) => {
          const {loaded, total} = e;
          this.uploadPrecent = ((loaded / total) * 100) | 0;
        }).then(res => {
          // 关闭上传进度条
          this.showBlackMask = false;
          if (res.status) {
            if (0 === res.data.length) {
              this.$message.success("资源上传完成");
              this.saveEnd();
            } else {
              this.userSelect();
            }
          } else {
            this.$message.error(res.msg);
          }
        });
      }, 200);
    },
    /**
     * {多目标弹出用户选择框}
     *
     * @author: 宋康
     * @date: 2023/2/9
     */
    userSelect() {
      this.beforeHideMethod();
      this.$emit("too-file")
    },
    /**
     * {上传完成触发}
     *
     * @author: 宋康
     * @date: 2023/2/9
     */
    saveEnd() {
      this.beforeHideMethod();
      this.$emit("save-end");
    }
  },
  watch: {
    isShow(n) {
      this.showResourceUpload = n
    }
  },
}
</script>

<style lang="scss" scoped>
.upload-el-progress {
  &:deep(.el-progress__text) {
    color: #ffffff;
  }
}

.upload-text {
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}
</style>